<!-- 同比环比分析 -->
<template>
  <div class="newTest">
    <div class="header" v-if="streeSiteType === null">
      <div class="left">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          :class="['item', tabtype === index ? 'active' : '']"
          style="margin-right: 40px"
          @click="changetabSelect(index)"
        >
          <div class="title">{{ item.label }}</div>
          <div class="line" v-show="tabtype === index"></div>
        </div>
      </div>
    </div>
    <div
      class="childHeader"
      v-if="streeSiteType === 'stree' || streeSiteType === 'site'"
    >
      <div class="left" v-if="streeSiteType === 'stree'">
        <div class="line"></div>
        <div class="title">街道分析-{{ searchForm.street }}</div>
        <div class="back" @click="back">返回</div>
      </div>
      <div class="left" v-if="streeSiteType === 'site'">
        <div class="line"></div>
        <div class="title">站点分析-{{ searchForm.station }}</div>
        <div class="back" @click="back">返回</div>
      </div>
      <div class="number" v-if="streeSiteType === 'stree'">
        站点数量：<span>{{ searchForm.num }}</span>
      </div>
    </div>
    <div class="searchBox" v-show="tabtype === 0 || streeSiteType !== null">
      <div class="left">
        <div class="leftone">
          <div
            :class="['item', searchForm.isYoYMoM === 0 ? 'active' : '']"
            @click="changeSelect(0)"
          >
            同比
          </div>
          <div
            :class="['item', searchForm.isYoYMoM === 1 ? 'active' : '']"
            @click="changeSelect(1)"
          >
            环比
          </div>
        </div>
        <div class="type">
          <el-radio-group v-model="searchForm.radiotype" @change="changeRadio">
            <el-radio :label="1" :disabled="searchForm.onedisabled"
              >一小时数据</el-radio
            >
            <el-radio :label="2" :disabled="searchForm.twodisabled"
              >两小时数据</el-radio
            >
          </el-radio-group>
        </div>
        <div class="black-box">
          <div class="time-select1 familyD">
            <span
              @click="select('date')"
              :class="[searchForm.dayType === 'date' ? 'active' : '', 'span']"
              >日</span
            >
            <span
              @click="select('week')"
              :class="[searchForm.dayType === 'week' ? 'active' : '', 'span']"
              >周</span
            >
            <span
              @click="select('month')"
              :class="[searchForm.dayType === 'month' ? 'active' : '', 'span']"
              >月</span
            >
            <div class="select-input ml-6">
              <el-date-picker
                :disabled="searchForm.disabled"
                @change="changeTime"
                popper-class="popper-class"
                :picker-options="pickerOptions"
                :format="searchForm.formatLabel"
                :value-format="searchForm.valueformat"
                v-model="searchForm.value"
                :type="searchForm.dayType"
                ref="picker"
                size="mini"
                :clearable="false"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top-right">
          <div class="lengd" v-for="(item, index) in lenged" :key="index">
            <div class="block" :style="{ background: item.color }"></div>
            <span class="span" :style="{ background: item.color }"></span>
            <div>{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dataChartCnt" v-loading="hisLoading">
      <div class="main-list" v-show="tabtype === 0 || streeSiteType !== null">
        <template v-if="searchForm.show">
          <template v-for="(item, index) in factory">
            <div
              class="main-item"
              :key="index"
              v-if="item.show && (item.left !== null || item.right !== null)"
            >
              <div class="echart">
                <div
                  class="echartHeight"
                  @click="
                    item.stitle === '超标次数（次）' ? leftHandle('left') : ''
                  "
                >
                  <span>{{ item.left === null ? "无数据" : item.left }}</span>
                  <div
                    class="echart-left"
                    :style="{ height: item.leftHeight * 100 + '%' }"
                  ></div>
                </div>
                <div class="echart-main">
                  <div
                    class="main-content"
                    v-if="item.rate && Number(item.rate.value) !== null"
                  >
                    <div
                      class="value fs-16"
                      :style="{ color: setColor(item.rate.name) }"
                    >
                      {{ item.rate.value }}
                    </div>
                    <div class="main-title fs-16">{{ item.rate.name }}</div>
                  </div>
                  <div class="main-content" v-else>
                    <div class="value fs-16">无数据</div>
                  </div>
                  <lineChart :option="item"></lineChart>
                </div>
                <img src="../../public/img/chain.png" alt="" />
                <div class="date">
                  <div
                    class="left-date"
                    :style="{ width: leftTime.length > 12 ? '80px' : 'auto' }"
                  >
                    {{ leftTime }}
                  </div>
                  <div
                    class="right-date"
                    :style="{ width: rightTime.length > 12 ? '80px' : 'auto' }"
                  >
                    {{ rightTime }}
                  </div>
                </div>
                <div
                  class="barRight"
                  @click="
                    item.stitle === '超标次数（次）' ? rightHandle('right') : ''
                  "
                >
                  <span>{{ item.right === null ? "无数据" : item.right }}</span>
                  <div
                    class="echart-right"
                    :style="{ height: item.rightHeight * 100 + '%' }"
                  ></div>
                </div>
              </div>
              <div class="title" v-if="item.show">{{ item.stitle }}</div>
            </div>
          </template>
        </template>
        <p class="noData" v-else>暂无数据</p>
      </div>
      <div
        v-show="(tabtype === 1 || tabtype === 2) && streeSiteType === null"
        class="siteAmalys"
      >
        <div class="search-input">
          <el-input
            :size="'mini'"
            v-model="sitename"
            :placeholder="tabtype === 1 ? '请输入街道名称' : '请输入站点名称'"
            @input="showStation"
          ></el-input>
          <i class="el-icon-search"></i>
        </div>
        <el-table
          v-show="tabtype === 1"
          :data="streeList"
          :cell-style="{ height: '40px' }"
        >
          <el-table-column
            align="center"
            label="序列"
            type="index"
            :width="100"
          ></el-table-column>
          <el-table-column prop="name" label="街道名称" align="center">
          </el-table-column>
          <el-table-column prop="stationSize" label="站点数量" align="center">
          </el-table-column>
          <el-table-column
            prop="operation1"
            label="同比环比详情"
            align="center"
          >
            <template slot-scope="{ row }">
              <div
                class="detail"
                @click="streetAnaly('stree', row, row.stationSize)"
              >
                <div>查看</div>
                <div class="line"></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-show="tabtype === 2"
          :data="tableList"
          :cell-style="{ height: '40px' }"
        >
          <el-table-column
            align="center"
            label="序列"
            type="index"
            :width="100"
          ></el-table-column>
          <el-table-column prop="waterStation" label="站点名称" align="center">
          </el-table-column>
          <el-table-column prop="street" label="所属区域" align="center">
          </el-table-column>
          <el-table-column prop="address" label="详细地址" align="center">
          </el-table-column>
          <el-table-column
            prop="operation2"
            label="同比环比详情"
            align="center"
          >
            <template slot-scope="{ row }">
              <div
                class="detail"
                @click="streetAnaly('site', row, row.stationSize)"
              >
                <div>查看</div>
                <div class="line"></div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="paging mt-10">
          <v-paging
            @setCurrent="setPage"
            @setCurren="setNum"
            :total="totalpage"
          />
        </div>
      </div>
    </div>
    <el-dialog
      custom-class="over"
      :visible.sync="overVisible"
      width="60%"
      :append-to-body="true"
    >
      <div slot="title" class="dialog-header">
        <div class="left">
          <div class="title">{{ searchForm.title }}超标次数</div>
          <div class="content">
            {{ detailInfo.time }} {{ detailInfo.title }} 合计超标：{{
              totalpage
            }}次 超标因子为：<span
              v-for="(item, index) in detailInfo.factor"
              :key="index"
              style="margin-right: 10px"
            >
              <span style="color: #ff6665"> {{ index }}{{ item }}</span>
              次</span
            >
          </div>
        </div>
      </div>
      <div class="table" v-loading="hisLoadingDialg">
        <el-table
          :data="detailInfo.list"
          height="100%"
          :cell-style="{ height: '40px' }"
        >
          <el-table-column
            align="center"
            label="序列"
            type="index"
            :width="100"
          ></el-table-column>
          <el-table-column prop="waterstation" label="超标站点" align="center">
          </el-table-column>
          <el-table-column prop="gmtMonitor" label="超标时间" align="center">
          </el-table-column>
          <el-table-column align="center" label="超标因子及浓度">
            <template slot-scope="{ row }">
              <span class="texthead fs-14" v-if="row.nickel"
                >总镍：
                <span style="color: #ff6665">{{ row.nickel }}</span> mg/L</span
              >
              <span class="texthead fs-14" v-if="row.nitrogen"
                >总氮：
                <span style="color: #ff6665">{{ row.nitrogen }}</span>
                mg/L</span
              >
              <span class="texthead fs-14" v-if="row.ph"
                >pH:
                <span style="color: #ff6665">{{ row.ph }}</span>
              </span>
              <span class="texthead fs-14" v-if="row.cod"
                >CODcr:
                <span style="color: #ff6665">{{ row.cod }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.ammoniaNitrogen"
                >氨氮:
                <span style="color: #ff6665">{{ row.ammoniaNitrogen }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.cuprum"
                >总铜:
                <span style="color: #ff6665">{{ row.cuprum }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.chromium"
                >总铬:
                <span style="color: #ff6665">{{ row.chromium }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.prussiate"
                >总氰化物:
                <span style="color: #ff6665">{{ row.prussiate }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.zinc"
                >总锌:
                <span style="color: #ff6665">{{ row.zinc }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.phosphorus"
                >总磷:
                <span style="color: #ff6665">{{ row.phosphorus }}</span>
                mg/L
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="超标倍数">
            <template slot-scope="{ row }">
              <span class="texthead fs-14" v-if="row.phMultiple"
                >pH：<span style="color: #ff6665">-</span>
              </span>
              <span class="texthead fs-14" v-if="row.nickelMultiple"
                >总镍：<span style="color: #ff6665">{{
                  row.nickelMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.chromiumMultiple"
                >总铬：<span style="color: #ff6665">{{
                  row.chromiumMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.nitrogenMultiple"
                >总氮：<span style="color: #ff6665">{{
                  row.nitrogenMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.codMultiple"
                >CODcr：<span style="color: #ff6665">{{
                  row.codMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.ammoniaNitrogenMultiple"
                >氨氮：<span style="color: #ff6665">{{
                  row.ammoniaNitrogenMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.cuprumMultiple"
                >总铜：<span style="color: #ff6665">{{
                  row.cuprumMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.prussiateMultiple"
                >总氰化物：<span style="color: #ff6665">{{
                  row.prussiateMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.zincMultiple"
                >总锌:<span style="color: #ff6665">{{ row.zincMultiple }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.phosphorusMultiple"
                >总磷:<span style="color: #ff6665">{{
                  row.phosphorusMultiple
                }}</span>
                倍</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging mt-10">
        <v-paging
          :pageNum="searchForm.pageNum"
          @setCurrent="setPage1"
          @setCurren="setNum1"
          :total="totalpage"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import lineChart from "../components/charts.vue";
import {
  street,
  YoYMoM,
  stationStreet,
  sitedata,
  excessivedataStreet,
  excessivedataAll,
} from "@/http/api";
import {
  getFirstDayOfMonth,
  CurrentMonthLast,
  getMonthDay,
} from "@/plugins/dateUtil";
export default {
  components: {
    lineChart,
  },
  data() {
    return {
      clickType: null,
      overVisible: false,
      detailInfo: {
        time: "",
        title: "",
        value: "",
        list: [],
        name: "",
        factor: {},
      },
      tableList: [],
      streeList: [],
      totalpage: 0,
      sitename: "",
      tabList: [
        {
          label: "全区分析",
        },
        {
          label: "街道分析",
        },
        {
          label: "站点分析",
        },
      ],
      hisLoading: true,
      dataTypeList: [
        {
          label: "一小时数据",
          value: "oneHour",
        },
        {
          label: "两小时数据",
          value: "hour",
        },
      ],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() - 24 * 3600 * 1000;
        },
      },
      searchForm: {
        show: true,
        pageNum: 1,
        pageSize: 12,
        num: null,
        type: "oneHour",
        dayType: "date",
        formatLabel: "yyyy-MM-dd",
        valueformat: "yyyy-MM-dd",
        value: "",
        station: "",
        street: "",
        endTime: "",
        startTime: "",
        radiotype: 2, //1==一小时 ---- 2==2小时
        isYoYMoM: 0, //0同比1环比
        onedisabled: false,
        twodisabled: false,
        disabled: false,
        lasttime: "",
        starttime: "",
        title: "",
      },
      lenged: [
        {
          label: "上期",
          color: "#F6BC2F",
        },
        {
          label: "本期",
          color: "#2FBDF8",
        },
        {
          label: "改善率",
          color: "#1AEFAB",
        },
        {
          label: "恶化率",
          color: "#FF6969",
        },
        {
          label: "持平",
          color: "#8B9AC7",
        },
      ],
      type: 0,
      tabtype: 2,
      streeSiteType: null,
      factory: {
        numOfExceed: {
          stitle: "超标次数（次）",
        },
        pH: {
          stitle: "pH均值",
        },
        cod: {
          stitle: "CODcr均值（mg/L）",
        },
        ammoniaNitrogen: {
          stitle: "氨氮均值（mg/L)",
        },
        phosphorus: {
          stitle: "总磷均值（mg/L)",
        },
        nitrogen: {
          stitle: "总氮均值（mg/L)",
        },
        nickel: {
          stitle: "总镍均值（mg/L)",
        },
        cuprum: {
          stitle: "总铜均值（mg/L)",
        },
        chromium: {
          stitle: "总铬均值（mg/L)",
        },
        prussiate: {
          stitle: "总氰化物均值（mg/L)",
        },
        zinc: {
          stitle: "总锌均值（mg/L)",
        },
      },
      redata: {},
      exceedMax: null,
      factorMax: null,
      rightTime: "",
      leftTime: "",
      hisLoadingDialg: true,
    };
  },
  created() {
    this.changetabSelect(0);
  },
  methods: {
    /* 头部tab切换 */
    changetabSelect(type) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      this.hisLoading = true;
      switch (Number(type)) {
        case 0:
          this.searchForm.station = "";
          this.searchForm.street = "";
          this.searchForm.isYoYMoM = 0;
          this.searchForm.radiotype = 2;
          this.select(this.searchForm.dayType);
          break;
        case 1:
          this.sitename = "";
          this.getStreeList();
          break;
        default:
          this.sitename = "";
          this.getStationList();
          break;
      }
      this.tabtype = type;
    },
    /* 日月周，选择 */
    select(type) {
      this.searchForm.dayType = type;
      let month = new Date().getTime() - 30 * 24 * 3600 * 1000;
      let date = new Date().getTime() - 24 * 3600 * 1000;
      let week = new Date().getTime() - 24 * 3600 * 1 * 1000;
      let startisYoYMoM0tong = new Date("2021-03-01").getTime();
      let startisYoYMoM0huan = new Date("2020-04-01").getTime();
      let startisYoYMoM0huandate = new Date("2020-03-02").getTime();
      let e = null;
      let that = this;
      switch (type) {
        case "month":
          this.searchForm.value = new Date(month);
          this.searchForm.valueformat = "yyyy-MM";
          this.searchForm.formatLabel = "yyyy-MM";
          this.pickerOptions = {
            disabledDate(time) {
              if (that.searchForm.isYoYMoM === 0) {
                return (
                  time.getTime() > month || time.getTime() < startisYoYMoM0tong
                );
              } else {
                return (
                  time.getTime() > month || time.getTime() < startisYoYMoM0huan
                );
              }
            },
          };
          e = this.$getOcerTime(new Date(month), "month");
          this.searchForm.disabled = false;
          break;
        case "date":
          this.searchForm.value = new Date(date);
          this.searchForm.formatLabel = "yyyy-MM-dd";
          this.searchForm.valueformat = "yyyy-MM-dd";

          this.pickerOptions = {
            disabledDate(time) {
              if (that.searchForm.isYoYMoM === 0) {
                return (
                  time.getTime() > date || time.getTime() < startisYoYMoM0tong
                );
              } else {
                return (
                  time.getTime() > date ||
                  time.getTime() < startisYoYMoM0huandate
                );
              }
            },
          };
          e = this.$getOcerTime(new Date(date), "date");
          this.searchForm.disabled = false;
          break;
        default:
          this.pickerOptions = {
            disabledDate(time) {
              return time.getTime() > date || time.getTime() < week;
            },
          };
          this.searchForm.valueformat = "yyyy-MM-dd";
          this.searchForm.formatLabel =
            this.$getOcerTime(
              new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
              "date"
            ) +
            "至" +
            this.$getOcerTime(new Date(date), "date");
          this.searchForm.disabled = true;
          break;
      }
      this.changeTime(e);
    },
    /* 时间选择 */
    changeTime(e) {
      if (this.searchForm.isYoYMoM === 0) {
        switch (this.searchForm.dayType) {
          case "month":
            this.setLeftTime(e);
            this.setRightTime(e, this.searchForm.dayType);
            this.searchForm.startTime = getFirstDayOfMonth(new Date(e));
            this.searchForm.endTime = CurrentMonthLast(new Date(e));
            break;
          case "date":
            this.setLeftTime(e);
            this.setRightTime(e, this.searchForm.dayType);
            this.searchForm.startTime = e + " 00:00:00";
            this.searchForm.endTime = e + " 23:59:59";
            break;
          default:
            this.searchForm.endTime =
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 1000),
                "date"
              ) + " 23:59:59";
            this.searchForm.startTime =
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
                "date"
              ) + " 00:00:00";
            this.setLeftTime(
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
                "date"
              ) +
                "至" +
                this.$getOcerTime(
                  new Date(new Date().getTime() - 24 * 3600 * 1000),
                  "date"
                )
            );
            this.setRightTime(
              this.$getOcerTime(new Date(), "date"),
              this.searchForm.dayType
            );
            break;
        }
      } else {
        switch (this.searchForm.dayType) {
          case "month":
            this.setLeftTime(e);
            this.setRightTime(e, this.searchForm.dayType);
            this.searchForm.startTime = getFirstDayOfMonth(new Date(e));
            this.searchForm.endTime = CurrentMonthLast(new Date(e));
            break;
          case "date":
            this.setLeftTime(e);
            this.setRightTime(e, this.searchForm.dayType);
            this.searchForm.startTime = e + " 00:00:00";
            this.searchForm.endTime = e + " 23:59:59";
            break;
          default:
            this.searchForm.endTime =
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 1000),
                "date"
              ) + " 23:59:59";
            this.searchForm.startTime =
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
                "date"
              ) + " 00:00:00";
            this.setLeftTime(
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
                "date"
              ) +
                "至" +
                this.$getOcerTime(
                  new Date(new Date().getTime() - 24 * 3600 * 1000),
                  "date"
                )
            );
            this.setRightTime(
              this.$getOcerTime(
                new Date(new Date().getTime() - 24 * 3600 * 8 * 1000),
                "date"
              ),
              this.searchForm.dayType
            );
            break;
        }
      }
      this.reset();
      this.hisLoading = true;
      this.initYoYMoM();
    },
     // 街道与站点信息
    async getStreeList() {
      let params = {
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
      };
      let res = await street(params);
      this.hisLoading = false;
      this.totalpage = res.data.total;
      this.streeList = res.data.data;
    },
    // 根据用户获取站点和街道信息
    async getStationList() {
      let params = {
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
      };
      let res = await stationStreet(params);
      this.hisLoading = false;
      this.totalpage = res.data.total;
      this.tableList = res.data.data;
    },
    /* 单个站点超标数据获取 */
    async getsitedata(startTime, endTime) {
      var params = {
        starttime: startTime,
        lasttime: endTime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        waterStation: this.searchForm.station,
      };
      this.searchForm.title = this.searchForm.station;
      let res = await sitedata(params);
      this.hisLoadingDialg = false;
      this.detailInfo.factor = res.data.factor;
      this.detailInfo.list = res.data.data;
      this.totalpage = res.data.total;
    },
    /*  某个街道所有站点超标数据情况 */
    async getStreetData(startTime, endTime) {
      var params = {
        starttime: startTime,
        lasttime: endTime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        street: this.searchForm.street,
        dataType: this.searchForm.radiotype === 1 ? 0 : 1,
      };
      this.searchForm.title = this.searchForm.street;
      let res = await excessivedataStreet(params);
      this.hisLoadingDialg = false;
      this.detailInfo.factor = res.data.factor;
      this.detailInfo.list = res.data.data;
      this.totalpage = res.data.total;
    },
    /* 全区所有站点超标数据情况 */
    async getAll(startTime, endTime) {
      var params = {
        starttime: startTime,
        lasttime: endTime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        dataType: this.searchForm.radiotype === 1 ? 0 : 1,
      };
      this.searchForm.title = "全区";
      let res = await excessivedataAll(params);
      this.hisLoadingDialg = false;
      this.detailInfo.factor = res.data.factor;
      this.detailInfo.list = res.data.data;
      this.totalpage = res.data.total;
    },
    /* 左边超标点击 */
    leftHandle(type) {
      this.clickType = type;
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 12;
      this.detailInfo.time = this.leftTime;
      this.getOverTime(type);
      this.overVisible = true;
    },
    /* 右边超标点击 */
    rightHandle(type) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 12;
      this.clickType = type;
      this.detailInfo.time = this.rightTime;
      this.getOverTime(type);
      this.overVisible = true;
    },
    /* 处理超标时间 */
    getOverTime(clicktype) {
      this.detailInfo.list = [];
      if (clicktype === "left") {
        switch (this.tabtype) {
          case 0:
            this.getAll(this.searchForm.startTime, this.searchForm.endTime);
            break;
          case 1:
            this.getStreetData(
              this.searchForm.startTime,
              this.searchForm.endTime
            );
            break;
          case 2:
            this.getsitedata(
              this.searchForm.startTime,
              this.searchForm.endTime
            );
            break;
        }
      } else {
        switch (this.tabtype) {
          case 0:
            if (this.searchForm.dayType === "date") {
              this.getAll(
                this.rightTime + " 00:00:00",
                this.rightTime + " 23:59:59"
              );
            } else if (this.searchForm.dayType === "month") {
              this.getAll(
                getFirstDayOfMonth(new Date(this.rightTime)),
                CurrentMonthLast(new Date(this.rightTime))
              );
            } else {
              let arr = this.rightTime.split("至");
              this.getAll(arr[0] + " 00:00:00", arr[1] + " 23:59:59");
            }
            break;
          case 1:
            if (this.searchForm.dayType === "date") {
              this.getStreetData(
                this.rightTime + " 00:00:00",
                this.rightTime + " 23:59:59"
              );
            } else if (this.searchForm.dayType === "month") {
              this.getStreetData(
                getFirstDayOfMonth(new Date(this.rightTime)),
                CurrentMonthLast(new Date(this.rightTime))
              );
            } else {
              let arr = this.rightTime.split("至");
              this.getStreetData(arr[0] + " 00:00:00", arr[1] + " 23:59:59");
            }
            break;
          case 2:
            if (this.searchForm.dayType === "date") {
              this.getsitedata(
                this.rightTime + " 00:00:00",
                this.rightTime + " 23:59:59"
              );
            } else if (this.searchForm.dayType === "month") {
              this.getsitedata(
                getFirstDayOfMonth(new Date(this.rightTime)),
                CurrentMonthLast(new Date(this.rightTime))
              );
            } else {
              let arr = this.rightTime.split("至");
              this.getsitedata(arr[0] + " 00:00:00", arr[1] + " 23:59:59");
            }
            break;
        }
      }
    },
    /* 获取全区分析 同比环比 */
    async initYoYMoM() {
      let params = {};
      switch (this.tabtype) {
        case 0:
          params = {
            endTime: this.searchForm.endTime,
            startTime: this.searchForm.startTime,
            type: this.searchForm.radiotype,
            isYoYMoM: this.searchForm.isYoYMoM,
          };
          break;
        case 1:
          params = {
            street: this.searchForm.street,
            endTime: this.searchForm.endTime,
            startTime: this.searchForm.startTime,
            type: this.searchForm.radiotype,
            isYoYMoM: this.searchForm.isYoYMoM,
          };
          break;
        case 2:
          params = {
            station: this.searchForm.station,
            endTime: this.searchForm.endTime,
            startTime: this.searchForm.startTime,
            type: this.searchForm.radiotype,
            isYoYMoM: this.searchForm.isYoYMoM,
          };
          break;
      }
      let res = await YoYMoM(params);
      this.redata = res.data.chart;
      this.exceedMax = res.data.exceedMax;
      this.factorMax = res.data.factorMax;
      this.searchForm.show = res.data.show;
      this.factory = this.initFactory(
        this.redata,
        this.factory,
        Number(this.exceedMax),
        Number(this.factorMax)
      );
      this.hisLoading = false;
    },

    /* 初始化因子图表 */
    initFactory(data, factory, exceedMax, factorMax) {
      for (let key in factory) {
        if (data[key] !== undefined) {
          factory[key] = Object.assign(
            factory[key],
            this.initOption(data[key].rate)
          );
          factory[key].rate = data[key].rate;
          factory[key].show = true;
          factory[key].left = data[key].left;
          factory[key].right = data[key].right;
          if (key !== "numOfExceed") {
            factory[key].leftHeight = data[key].left / factorMax;
            factory[key].rightHeight = data[key].right / factorMax;
          } else {
            factory[key].leftHeight = data[key].left / exceedMax;
            factory[key].rightHeight = data[key].right / exceedMax;
          }
        } else {
          factory[key].show = false;
        }
      }
      return factory;
    },

    /* 初始化生成同比环比图表 */
    initOption(data) {
      return {
        // backgroundColor: "#180f2a",
        polar: {
          radius: ["80%", "94%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 80,
            showBackground: true,
            backgroundStyle: {
              color: "#EBF1F5",
            },
            color: [this.setColor(data.name)],
            data: [this.setValue(data, data.name)],
            coordinateSystem: "polar",
          },
        ],
      };
    },
    /* 设置图表颜色 */
    setColor(title) {
      switch (title) {
        case "改善率":
          return "#1AEFAB";
        case "恶化率":
          return "#FF6969";
        default:
          return "#8B9AC7";
      }
    },
    /* 设置图表值 */
    setValue(value, name) {
      if (name === "持平") {
        return 100;
      } else {
        let val = value.value.indexOf("%");
        let num = null;
        if (val > -1) {
          num = value.value.split("%")[0];
          if (num >= 100) {
            return 100;
          } else {
            return num;
          }
        } else {
          return 0;
        }
      }
    },
    /* 街道table详情跳转 */
    streetAnaly(type, data, num) {
      if (type === "site") {
        this.searchForm.station = data.waterStation;
        if (data.dataType === 0) {
          this.searchForm.onedisabled = false;
          this.searchForm.twodisabled = true;
          this.searchForm.radiotype = 1;
        } else {
          this.searchForm.onedisabled = true;
          this.searchForm.twodisabled = false;
          this.searchForm.radiotype = 2;
        }
      } else {
        if (data.dataType === 0) {
          this.searchForm.onedisabled = false;
          this.searchForm.twodisabled = true;
          this.searchForm.radiotype = 1;
        } else if (data.dataType === 1) {
          this.searchForm.onedisabled = true;
          this.searchForm.twodisabled = false;
          this.searchForm.radiotype = 2;
        } else {
          this.searchForm.onedisabled = false;
          this.searchForm.twodisabled = false;
          this.searchForm.radiotype = 2;
        }
        this.searchForm.street = data.name;
        this.searchForm.num = num;
      }
      this.streeSiteType = type;
      this.searchForm.isYoYMoM = 0;
      this.select(this.searchForm.dayType);
    },
    /* 搜索站点 */
    showStation(e) {
      if (this.tabtype === 1) {
        if (e) {
          let reg = new RegExp("^.*" + e + ".*$");
          let arr = this.streeList.filter((data) => {
            return data.name && data.name.match(reg);
          });
          this.streeList = arr;
        } else {
          this.getStreeList();
        }
      } else {
        if (e) {
          let reg = new RegExp("^.*" + e + ".*$");
          let arr = this.tableList.filter((data) => {
            return data.waterStation && data.waterStation.match(reg);
          });
          this.tableList = arr;
        } else {
          this.getStationList();
        }
      }
    },
    /* 同比环比选择 */
    changeSelect(type) {
      this.searchForm.isYoYMoM = type;
      this.select(this.searchForm.dayType);
    },
    /* 同比环比，一小时两小时选择 */
    changeRadio(e) {
      if (e === 1) {
        this.searchForm.radiotype = 1;
      } else {
        this.searchForm.radiotype = 2;
      }
      this.select(this.searchForm.dayType);
    },
    /* 设置左边时间 */
    setLeftTime(e) {
      this.leftTime = e;
    },
    /* 设置右边时间 */
    setRightTime(e) {
      if (this.searchForm.isYoYMoM === 0) {
        switch (this.searchForm.dayType) {
          case "month":
            this.rightTime = this.$getOcerTime(
              new Date(new Date(e).getTime() - 31536000000),
              "month"
            );
            break;
          case "date":
            this.rightTime = this.$getOcerTime(
              new Date(new Date(e).getTime() - 31536000000),
              "date"
            );
            break;
          default:
            this.rightTime =
              this.$getOcerTime(
                new Date(
                  new Date(e).getTime() - 31536000000 - 7 * 3600 * 24 * 1000
                ),
                "date"
              ) +
              "至" +
              this.$getOcerTime(
                new Date(
                  new Date(e).getTime() - 31536000000 - 1 * 3600 * 24 * 1000
                ),
                "date"
              );
            break;
        }
      } else {
        switch (this.searchForm.dayType) {
          case "month":
            let day = getMonthDay(
              new Date(e).getFullYear(),
              new Date(e).getMonth() - 1
            );
            this.rightTime = this.$getOcerTime(
              new Date(new Date(e).getTime() - 3600 * 24 * day * 1000),
              "month"
            );
            break;
          case "date":
            this.rightTime = this.$getOcerTime(
              new Date(new Date(e).getTime() - 3600 * 24 * 1000),
              "date"
            );
            break;
          default:
            this.rightTime =
              this.$getOcerTime(
                new Date(new Date(e).getTime() - 6 * 3600 * 24 * 1000),
                "date"
              ) +
              "至" +
              this.$getOcerTime(new Date(new Date(e).getTime()), "date");
            break;
        }
      }
    },
    /* 数量 */
    setNum(e) {
      this.hisLoading = true;
      this.searchForm.pageNum = e;
      if (this.streeSiteType === "stree") {
        this.getStreeList();
      } else {
        this.getStationList();
      }
    },
    /* 页码 */
    setPage(e) {
      this.hisLoading = true;
      this.searchForm.pageSize = e;
      if (this.streeSiteType === "stree") {
        this.getStreeList();
      } else {
        this.getStationList();
      }
    },
    /* 数量 */
    setNum1(e) {
      this.hisLoadingDialg = true;
      this.searchForm.pageNum = e;
      this.getOverTime(this.clickType);
    },
    /* 页码 */
    setPage1(e) {
      this.hisLoadingDialg = true;
      this.searchForm.pageSize = e;
      this.getOverTime(this.clickType);
    },
    /* 重置因子配置 */
    reset() {
      this.factory = {
        numOfExceed: {
          stitle: "超标次数（次）",
        },
        pH: {
          stitle: "pH均值",
        },
        cod: {
          stitle: "CODcr均值（mg/L）",
        },
        ammoniaNitrogen: {
          stitle: "氨氮均值（mg/L)",
        },
        phosphorus: {
          stitle: "总磷均值（mg/L)",
        },
        nitrogen: {
          stitle: "总氮均值（mg/L)",
        },
        nickel: {
          stitle: "总镍均值（mg/L)",
        },
        cuprum: {
          stitle: "总铜均值（mg/L)",
        },
        chromium: {
          stitle: "总铬均值（mg/L)",
        },
        prussiate: {
          stitle: "总氰化物均值（mg/L)",
        },
        zinc: {
          stitle: "总锌均值（mg/L)",
        },
      };
    },
    /* 详情返回 */
    back() {
      if (this.streeSiteType === "stree") {
        this.tabtype = 1;
      } else {
        this.tabtype = 2;
      }
      this.searchForm.onedisabled = false;
      this.searchForm.twodisabled = false;
      this.streeSiteType = null;
    },
  },
};
</script>

<style lang="scss">
.newTest {
  min-height: 100%;
  .dataChartCnt {
    background-color: #fff;
    padding: 0 20px;
  }
  .header {
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border;
    border-bottom: 1px solid #eeeeee;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        height: 30px;
        .title {
          display: block;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #bfbfbf;
          height: 30px;
        }
        .line {
          bottom: 0;
          position: absolute;
          width: 30px;
          height: 3px;
          background: #2399ff;
          border: 1px solid #c7d3e3;
          border-radius: 2px;
        }
      }
      .active {
        .title {
          color: #2399ff;
        }
      }
    }
  }
  .childHeader {
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border;
    border-bottom: 1px solid #eeeeee;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .line {
        width: 4px;
        height: 20px;
        background: #2399ff;
        margin-right: 10px;
      }
      .title {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #2399ff;
        margin-right: 35px;
      }
      .back {
        width: 56px;
        height: 28px;
        border: 1px solid #2399ff;
        border-radius: 2px;
        text-align: center;
        line-height: 28px;
        color: #2399ff;
        cursor: pointer;
      }
      .number {
        display: flex;
        align-items: center;
        color: #444444;
        font-size: 16px;
        span {
          color: #2399ff;
        }
      }
    }
  }
  .searchBox {
    padding: 20px;
    // margin-bottom: 20px;
    box-sizing: border;
    border-bottom: 1px solid #eeeeee;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      .leftone {
        display: flex;
        align-items: center;
        margin-right: 50px;
        .item {
          width: 48px;
          height: 28px;
          background: #fff;
          display: flex;
          text-align: center;
          line-height: 26px;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: relative;
          display: block;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #2399ff;
          border: 1px solid #2399ff;
        }
        .active {
          background: #2399ff;
          color: #fff;
        }
      }
      .black-box {
        display: flex;
        align-items: center;
        // margin-right: 80px;
        margin-left: 48px;
        .time-select1 {
          display: flex;
          align-items: center;
          padding: 0px 8px;
          cursor: pointer;
          .span {
            display: inline-block;
            padding: 0px 10px;
            height: 28px;
            background: #fff;
            border: 1px solid #dcdfe6;
            opacity: 0.6;
            border-radius: 2px;
            text-align: center;
            line-height: 28px;
            margin-right: 16px;
          }
          .active {
            opacity: 1;
            color: #57b1ff;
            border: 1px solid #57b1ff;
          }

          .select-input {
            /deep/ .el-input__prefix {
              right: 0.02604rem;
              left: auto;
              top: -4px;
            }
            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
              width: 230px;
            }
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .top-right {
        display: flex;
        align-items: center;
        .lengd {
          display: flex;
          align-items: center;
          font-size: 18px;
          margin-right: 18px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #8a9bac;
          position: relative;
          .block {
            width: 16px;
            height: 16px;
            opacity: 0.35;
            border-radius: 2px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
          }
          span {
            left: 3px;
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 2px;
          }
        }
        .lengd:nth-last-child(1) {
          margin-right: 0 !important;
        }
      }
    }
  }
  .main-list {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 3% 2%;
    box-sizing: border-box;
    .noData {
      width: 100%;
      text-align: center;
    }
    .main-item {
      flex: 1 25%;
      max-width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 60px;
      .title {
        width: 180px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-size: 100% 100%;
        color: #2399ff;
        font-size: 14px;
        font-weight: 500;
      }
      .echart {
        position: relative;
        width: 254px;
        height: 160px;
        background-size: 100% 100%;
        margin-bottom: 30px;
        img {
          position: absolute;
          left: -4px;
        }
        .echartHeight {
          cursor: pointer;
          position: relative;
          height: 100%;
          width: 40px;
          left: 8px;
          border: 1px solid #2fbdf8;
          .echart-left {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 40px;
            background: #2fbdf8;
          }
          span {
            text-align: center;
            position: absolute;
            width: 44px;
            color: #2fbdf8;
            top: -22px;
            font-size: 14px;
          }
        }
        .date {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 5px;
          .right-date {
            text-align: center;
            color: #8a9bac;
            font-size: 12px;
          }
          .left-date {
            text-align: center;
            color: #8a9bac;
            font-size: 12px;
          }
        }
        .barRight {
          cursor: pointer;
          position: absolute;
          height: 100%;
          width: 40px;
          top: 0;
          right: 8px;
          border: 1px solid #f6bc2f;
          .echart-right {
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 40px;
            background: #f6bc2f;
          }

          span {
            position: absolute;
            text-align: center;
            width: 48px;
            right: -4px;
            color: #f6bc2f;
            top: -22px;
            font-size: 14px;
          }
        }

        .echart-main {
          position: absolute;
          top: 47%;
          left: 50%;
          width: 120px;
          height: 120px;
          transform: translate(-50%, -50%);
          .main-content {
            position: absolute;
            top: 53%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
            .main-title {
              color: #8baddb;
              margin-bottom: 4px;
            }
            .value {
              color: #00ea8b;
            }
          }
        }
      }
    }
  }
  .siteAmalys {
    padding: 28px 0px;
    height: 100%;
    box-sizing: border-box;
    .search-input {
      display: flex;
      align-items: center;
      background: #fff;
      width: 240px;
      border-radius: 50px;
      height: 32px;
      opacity: 0.9;
      line-height: 32px;
      margin-bottom: 28px;
      .el-icon-search {
        position: relative;
        display: inline-block;
        left: -20px;
      }
    }
    .detail {
      color: #0081eb;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      .line {
        background: #0081eb;
        width: 26px;
        height: 1px;
      }
    }
  }
  .paging {
    .bottom-wrap {
      width: 100%;
      position: relative;
      top: 0;
    }
    .block {
      margin: 0px;
      padding-bottom: 0px;
      margin-top: 20px;
    }
  }
}
</style>
<style lang="scss">
.time-select1 .el-picker-panel__content {
  max-height: initial !important;
  width: auto;
}
.popper-class {
  position: absolute !important;
  z-index: 10000 !important;
}
.dialog-header {
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .content {
    font-size: 16px;
  }
}
.table {
  height: 500px;
  border: 1px solid #dde4eb;
  .table {
    flex: 1;
    width: 100%;
    position: relative;
    .top {
      position: absolute;
      width: 100%;
    }
  }
  .texthead {
    margin-right: 19px;
  }
}
.paging {
  .bottom-wrap {
    width: 100%;
    position: relative;
    top: 0;
  }
  .block {
    margin: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
  }
}
</style>